<!--
 * @Author: bao
 * @Description: 消费记录列表
 * @Date: 2020-02-02 14:53:02
 -->
<template>
  <div id="xfjlBox" style="padding: 10px 20px; background-color: #fff;">
    <p class="title">消费记录列表</p>
    <div class="btnBox">
      <div class="box">
        <div class="single-search-item">
          <div class="item-label">表名：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.tableEname"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">表名中文名：</div>
          <div class="item-content">
            <a-input
              v-model="getPars.tableCname"
              placeholder=""
              style="width: 240px;"
            />
          </div>
        </div>
        <!-- <div class="single-search-item">
          <div class="item-label">入库时间：</div>
          <div class="item-content">
            <a-date-picker
              format="YYYY-MM-DD"
              @change="onDateChange"
              v-model="addTime"
              style="width: 240px;"
            />
          </div>
        </div> -->
        <div class="single-search-item">
          <div class="item-label">入库时间：</div>
          <div class="item-content">
            <a-range-picker
              v-model="addTime"
              :allowClear="false"
              valueFormat="YYYY-MM-DD"
              @change="onDateChange"
              style="width:240px;"
            />
          </div>
        </div>
        <div class="single-search-item">
          <div class="item-label">消费方式：</div>
          <div class="item-content">
            <a-select
              v-model="getPars.consumeType"
              allowClear
              style="width: 240px;"
            >
              <a-select-option :value="1">请求消费</a-select-option>
              <a-select-option :value="2">订阅消费</a-select-option>
            </a-select>
          </div>
        </div>
        <div class="single-search-item" style="width:190px;">
          <a-button type="primary" @click="startRefresh">查询</a-button>
          <a-button type="primary" @click="reSet" style="margin-left:20px"
            >重置</a-button
          >
        </div>
      </div>
    </div>
    <a-table
      class="ctr-row-table"
      :columns="listObject.columns"
      :dataSource="listObject.list"
      :loading="listObject.loading"
      :pagination="pagination"
      :customRow="clickCustomRow"
      rowKey="id"
      @change="handleTableChange"
    >
      <span slot="order" slot-scope="text, record, index">
        <em>{{ index + 1 }}</em>
      </span>
      <template slot="consumeType" slot-scope="text, record">
        <span>{{ record.consumeTypeName }}</span>
      </template>
    </a-table>
  </div>
</template>

<script>
import { page } from "@/api";
export default {
  data() {
    return {
      listObject: {
        loading: false,
        list: [],
        columns: [
          {
            title: "序号",
            align: "center",
            dataIndex: "order",
            scopedSlots: { customRender: "order" },
            width: 80,
            customRender: (text, record, index) =>
              `${(this.pagination.current - 1) * this.pagination.pageSize +
                (index + 1)}`
          },
          {
            title: "入库时间",
            dataIndex: "insertTime",
            scopedSlots: { customRender: "insertTime" },
            align: "center"
          },
          {
            title: "入库表名",
            dataIndex: "tableEname",
            scopedSlots: { customRender: "tableEname" },
            align: "center"
          },
          {
            title: "入库表中文名",
            dataIndex: "tableCname",
            scopedSlots: { customRender: "tableCname" },
            align: "center"
          },
          {
            title: "消费方式",
            dataIndex: "consumeType",
            scopedSlots: { customRender: "consumeType" },
            align: "center"
          },
          {
            title: "消费数据量",
            dataIndex: "dataConsumerNum",
            scopedSlots: { customRender: "dataConsumerNum" },
            align: "center"
          },
          {
            title: "实际入库量",
            dataIndex: "dataNum",
            scopedSlots: { customRender: "dataNum" },
            align: "center"
          },
          {
            title: "入库内容大小",
            dataIndex: "dataSize",
            scopedSlots: { customRender: "dataSize" },
            align: "center"
          },
          {
            title: "入库成功率",
            dataIndex: "successRate",
            scopedSlots: { customRender: "successRate" },
            align: "center"
          }
        ]
      },
      pagination: {
        current: 1,
        pageSize: 20
      },
      getPars: {
        currentPage: 1,
        pageSize: 10
      },
      addTime: []
    };
  },
  created() {
    //跳转到查看明细的页数
    let currentPageObj = this.$store.state.roleType.currentPageObj;
    if (currentPageObj.pageName == "xfjl") {
      this.getPars.currentPage = currentPageObj.currentPageNum;
    }
    this.getList();
  },
  computed: {},
  mounted() {},
  methods: {
    reSet() {
      this.getPars = {
        currentPage: 1,
        pageSize: 10,
        tableEname: "",
        tableCname: ""
      };
      this.addTime = [];
      this.getList();
    },
    onDateChange(date, dateString) {
      this.getPars.startTime = dateString[0];
      this.getPars.endTime = dateString[1];
      this.addTime = date;
    },
    onSelectType() {
      this.getPars.currentPage = 1;
      // this.getList();
    },
    startRefresh() {
      this.getPars.currentPage = 1;
      this.getList();
    },
    handleTableChange(pagination, filters, sorter) {
      this.getPars.currentPage = pagination.current;
      this.getList();
    },
    getList() {
      this.listObject.loading = true;
      page.getDataEntryList(this.getPars).then(res => {
        let { current, size, total } = res.data.data;
        this.listObject.list = res.data.data.records;
        this.listObject.loading = false;
        this.setPagination(current, size, total);
      });
    },
    setPagination(current, size, total) {
      this.pagination = {
        current: current,
        pageSize: size,
        total: total,
        showQuickJumper: true,
        showTotal: total => `共 ${total} 条记录`
      };
    },
    clickCustomRow(record, index) {
      var _this = this;
      return {
        on: {
          // 事件
          click: () => {
            //存储当前浏览页信息
            this.$store.commit("roleType/setCurrentPageNum", {
              pageName: "xfjl",
              currentPageNum: this.getPars.currentPage
            });
            _this.$router.push({
              path: "xfjl_detail",
              query: { sourceId: record.sourceId }
            });
            // _this.$router.push({
            //   name: "data_exchange_xfjl_detail",
            //   params: { id: record.id, sourceId: record.sourceId }
            // });
          }
        }
      };
    }
  }
};
</script>

<style lang="less">
#xfjlBox {
  .title {
    font-size: 24px;
    color: #333333ff;
    padding-bottom: 10px;
    border-bottom: 2px solid #ccccccff;
  }
  .btnBox {
    position: relative;
    height: 130px;
    overflow: hidden;
    margin-top: 30px;
    .btn {
      margin-left: 12px;
      margin-top: 10px;
    }
    .box {
      position: absolute;
      left: 0;
      top: 0;
      .single-search-item {
        // display: inline-block;
        float: left;
        width: 360px;
        padding: 10px;
      }
      .item-label {
        display: inline-block;
        width: 85px;
      }
      .item-content {
        display: inline-block;
        width: 240px;
      }
    }
  }
  .ctr-row-table .ant-table-tbody > tr > td {
    // display: block;
    padding: 16px;
    cursor: pointer;
  }
}
</style>
